/*
 * @Author: 肖思汗 
 * @Date: 2025-07-10 16:11:34 
 * @Last Modified by:   肖思汗 
 * @Last Modified time: 2025-07-10 16:11:34 
 */
import { ScrollView, Text, View } from '@tarojs/components';
import { Col, Price, Row } from '@nutui/nutui-react-taro';
import Taro, { useDidShow } from '@tarojs/taro';
import { chunk } from 'lodash';
import { autorun, toJS } from 'mobx';
import { useEffect, useState } from 'react';
import MyEmpty from 'src/components/MyEmpty/MyEmpty';
import PageLayer from 'src/components/PageLayer/PageLayer';
import utils from 'src/utils/utils';
import { GoodsData } from 'types/type';
import goGoodsDetail from '../GoodsDetail/goGoodsDetail';
import styles from './myCollection.module.less';
import myCollectionStore from './myCollectionStore';

// 我的收藏
export default function MyCollection() {

    const [goodsList, setGoodsList] = useState<Array<GoodsData>>([]);

    useDidShow(() => {
        myCollectionStore.getNextGoodsList(true);
    });

    useEffect(() => autorun(() => {
        setGoodsList(toJS(myCollectionStore.collectionList));
    }, { delay: 30 }), []);

    // 计算商品的高度
    const getGoodsItemHeight = () => {
        // 568 - 140
        // 932 - 200
        return 140 + (((190 - 140) / (932 - 568)) * (sysInfo.windowHeight - 568));
    };

    const sysInfo = Taro.getWindowInfo(); // 替换为 Taro.getWindowInfo
    const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
    const statusBarHeight = sysInfo.statusBarHeight || 0; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏总高度


    return (
        <PageLayer
            showBack title="我的收藏"
            className={styles.myCollection}
            hasTabBar={false}
        >
            {/* 收藏商品列表 */}
            {
                goodsList.length > 0 &&
                <ScrollView
                    className={styles.goodsList}
                    scrollY={true}         // 关键：启用垂直滚动
                    scrollWithAnimation    // 可选：启用滚动动画
                    style={{
                        height: sysInfo.windowHeight - navBarHeight - statusBarHeight - 0,
                    }}
                    onScroll={(e) => {
                        const { scrollTop, scrollHeight } = e.detail;
                        const height = (sysInfo.windowHeight - navBarHeight - statusBarHeight - 0);
                        if ((scrollHeight - height - scrollTop) < 50) {
                            myCollectionStore.getNextGoodsList();
                        }
                    }}
                >
                    {
                        chunk(goodsList, 2).map((goodss: Array<GoodsData>, i) => {
                            // 每两个商品为一组
                            return (
                                <Row key={i} className={styles.goodsListRow} >
                                    {
                                        goodss.map((goods, ii) => {
                                            return (
                                                <Col span={12} key={ii} >
                                                    <View
                                                        className={styles.goodsItem}
                                                        onClick={() => {
                                                            goGoodsDetail(goods.productId);
                                                        }}
                                                    >
                                                        <View
                                                            className={styles.goodsImage}
                                                            style={{
                                                                backgroundImage: `url(${goods.ifShowBorder && utils.ossSuffix(goods.borderImageUrl)}),url(${utils.ossSuffix(goods.productShowImageUrl, 200)})`
                                                            }}
                                                        />
                                                        <Text className={styles.goodsName}>{goods.productName}</Text>
                                                        <View className={styles.goodsFooter}>
                                                            <Price
                                                                price={goods.pagePrice}
                                                                size="normal"
                                                                digits={1}
                                                                thousands
                                                            />
                                                            <Text className={styles.originalPrice}>{`¥${goods.underlinePrice}`}</Text>
                                                        </View>
                                                    </View>
                                                </Col>
                                            );
                                        })
                                    }
                                </Row>
                            );
                        })
                    }
                </ScrollView>
            }
            {
                goodsList.length === 0 &&
                <MyEmpty
                    style={{
                        marginTop: "17vh"
                    }}
                    description="暂无收藏"
                    actions={[
                        {
                            text: '去逛逛',
                            onClick: () => {
                                Taro.switchTab({
                                    url: '/pages/Category/Category'
                                })
                            }
                        }
                    ]}
                />
            }
        </PageLayer>
    );
}

